import React, { Component } from 'react'
import './5-color.css';

export default class ColorPicker extends Component {
  // 声明状态
  state = {
    r: 0,
    g: 0,
    b: 0
  }

  //range 元素 onchange 的事件回调
  change = (type) => {
    return (e) => {
      //更新状态
      this.setState({
        [type]: e.target.value
      })
    }
  }

  //点击按钮复制的事件回调
  copyColor = () => {
    //解构赋值
    let {r,b,g} = this.state;
    navigator.clipboard.writeText(`rgb(${r},${g},${b})`)
  }

  render() {
    //解构赋值
    let {r,b,g} = this.state;
    return (
      <div className="color-wrapper">
        {/* 颜色的显示区域 */}
        <div className="color-show" style={{background: `rgb(${r},${g},${b})`}} ></div>
        <hr />
        {/* 颜色的控制区 */}
        <div className="color-control">
          红: <input type="range" min="0" max="255" value={r} onChange={this.change('r')} /> <span>{r}</span> <br></br>
          绿: <input type="range" min="0" max="255" value={g} onChange={this.change('g')} /> <span>{g}</span> <br></br>
          蓝: <input type="range" min="0" max="255" value={b} onChange={this.change('b')} /> <span>{b}</span> <br></br>
          <hr />
          <input type="text" readOnly value={`rgb(${r},${g},${b})`} /><button onClick={this.copyColor}>点击复制颜色</button>
        </div>
      </div>
    )
  }
}
